<template>
  <div class="container">
    <div class="nav">
      <el-switch v-model="isEdit" active-text="编辑" style="float: left">
      </el-switch>
      <el-button
        type="primary"
        size="small"
        @click="saveDragData"
        style="float: right"
        >保存</el-button
      >
    </div>
    <div class="drag-body" :class="isEdit ? 'drag-body-edit' : ''">
      <grid-layout
        :layout.sync="layout"
        :col-num="6"
        :row-height="50"
        :is-draggable="draggable"
        :is-resizable="resizable"
        :vertical-compact="true"
        :use-css-transforms="true"
        @layout-ready="layoutReadyEvent"
      >
        <grid-item
          v-for="item in layout"
          :key="item.i"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          @resized="resizedEvent"
          @container-resized="resizedEvent"
        >
          <DragItem :item="item">
            <DPie
              v-if="item.extData.type === 'pie'"
              :id="item.extData.options.id"
              :width="item.width + 'px'"
              :height="item.height + 'px'"
            ></DPie>
            <DLine
              v-if="item.extData.type === 'line'"
              :id="item.extData.options.id"
              :width="item.width + 'px'"
              :height="item.height + 'px'"
            ></DLine>
            <DBar
              v-if="item.extData.type === 'bar'"
              :id="item.extData.options.id"
              :width="item.width + 'px'"
              :height="item.height + 'px'"
            ></DBar>
            <div
              v-if="item.extData.type === 'custom'"
              style="width: 100%; height: 100%; background: #fff"
            >
              自定义内容123
            </div>
          </DragItem>
        </grid-item>
      </grid-layout>
    </div>
  </div>
</template>

<script>
import { GridLayout, GridItem } from "vue-grid-layout";
import DragItem from "@/components/DragContainer/DragItem";
import Pie from "@/components/DragContainer/Pie";
import Bar from "@/components/DragContainer/Bar";
import Line from "@/components/DragContainer/Line";
export default {
  components: {
    GridLayout,
    GridItem,
    DragItem,
    DPie: Pie,
    DBar: Bar,
    DLine: Line,
  },
  data() {
    return {
      layout: [
        {
          x: 0,
          y: 0,
          w: 2,
          h: 4,
          i: "0",
          extData: {
            type: "bar",
            options: {
              id: "bar1",
            },
          },
          width: 200,
          height: 200,
        },
        {
          x: 2,
          y: 0,
          w: 2,
          h: 4,
          i: "1",
          extData: {
            type: "pie",
            options: {
              id: "pie1",
            },
          },
          width: 200,
          height: 200,
        },
        {
          x: 4,
          y: 0,
          w: 2,
          h: 4,
          i: "2",
          extData: {
            type: "bar",
            options: {
              id: "bar2",
            },
          },
          width: 200,
          height: 200,
        },
        {
          x: 0,
          y: 4,
          w: 2,
          h: 4,
          i: "3",
          extData: {
            type: "custom",
            options: {},
          },
        },
        {
          x: 2,
          y: 4,
          w: 2,
          h: 4,
          i: "4",
          extData: {
            type: "pie",
            options: {
              id: "pie2",
            },
          },
          width: 200,
          height: 200,
        },
        {
          x: 4,
          y: 4,
          w: 2,
          h: 4,
          i: "5",
          extData: {
            type: "line",
            options: {
              id: "line1",
            },
          },
          width: 200,
          height: 200,
        },
      ],
      draggable: false,
      resizable: false,
      index: 0,
      isEdit: false,
    };
  },
  watch: {
    isEdit(n) {
      this.draggable = !this.draggable;
      this.resizable = !this.resizable;
    },
  },
  created() {
    if (localStorage.getItem("draggable-page-info")) {
      this.layout = JSON.parse(localStorage.getItem("draggable-page-info"));
    }
  },
  mounted() {},
  methods: {
    layoutReadyEvent(e) {
      this.layout.forEach((item) => {
        item.width = document.getElementById(`drag-item-${item.i}`).clientWidth;
        item.height = document.getElementById(
          `drag-item-${item.i}`
        ).clientHeight;
      });
    },
    resizedEvent(i, newH, newW, newHPx, newWPx) {
      this.layout.forEach((item) => {
        if (item.i === i) {
          item.h = newH;
          item.w = newW;
          item.height = newHPx;
          item.width = newWPx;
        }
      });
    },
    editDragItem() {
      console.log("editDragItem");
      this.draggable = true;
      this.resizable = true;
    },
    saveDragData() {
      console.log("saveDragData");
      const text = JSON.stringify(this.layout);
      console.log(
        "🚀 ~ file: DragContainer.vue ~ line 208 ~ saveDragData ~ text",
        text
      );
      localStorage.setItem("draggable-page-info", text);
      this.$message({
        type: "success",
        message: "已保存！",
      });
      this.isEdit = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
.nav {
  height: 32px;
  padding: 10px;
}
.drag-body {
  width: 100%;
  height: calc(100% - 52px);
}
.drag-body-edit {
  .vue-grid-item:not(.vue-grid-placeholder) {
    background: #ccc;
    outline: 1px solid black;
  }
}
.vue-grid-layout {
  background: #eee;
}
.vue-grid-item .resizing {
  opacity: 0.9;
}

</style>